<template>
  <div class="icon-selector">
    <el-select
      v-model="selectedIcon"
      placeholder="请选择图标"
      clearable
      filterable
      :filter-method="filterIcons"
      style="width: 100%"
      @change="handleIconChange"
    >
      <template #prefix>
        <el-icon v-if="selectedIcon" :size="16">
          <component :is="getIconComponent(selectedIcon)" />
        </el-icon>
      </template>
      
      <el-option-group
        v-for="(icons, category) in groupedIcons"
        :key="category"
        :label="getCategoryLabel(category)"
      >
        <el-option
          v-for="icon in icons"
          :key="icon.value"
          :label="icon.label"
          :value="icon.value"
        >
          <div class="icon-option">
            <el-icon :size="16" class="icon-preview">
              <component :is="getIconComponent(icon.value)" />
            </el-icon>
            <span class="icon-label">{{ icon.label }}</span>
          </div>
        </el-option>
      </el-option-group>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { getIconComponent, getIconOptionsByCategory } from '../utils/iconUtils'

// Props
interface Props {
  modelValue?: string
  showAll?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  showAll: false
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

// 选中的图标
const selectedIcon = ref(props.modelValue)

// 图标分类
const groupedIcons = computed(() => {
  const categories = getIconOptionsByCategory()
  
  // 如果只显示常用图标，过滤掉一些分类
  if (!props.showAll) {
    const commonCategories = ['basic', 'user', 'data', 'action', 'setting']
    const filteredCategories: Record<string, Array<{ label: string; value: string }>> = {}
    
    commonCategories.forEach(category => {
      if (categories[category]) {
        filteredCategories[category] = categories[category]
      }
    })
    
    return filteredCategories
  }
  
  return categories
})

// 获取分类标签
const getCategoryLabel = (category: string): string => {
  const labelMap: Record<string, string> = {
    basic: '基础图标',
    user: '用户相关',
    data: '数据相关',
    action: '操作相关',
    navigation: '导航相关',
    status: '状态相关',
    setting: '设置相关',
    communication: '通信相关',
    media: '媒体相关',
    other: '其他'
  }
  
  return labelMap[category] || category
}

// 过滤图标
const filterIcons = (query: string) => {
  // Element Plus的select组件会自动处理过滤
  return true
}

// 处理图标变化
const handleIconChange = (value: string) => {
  emit('update:modelValue', value)
}

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  selectedIcon.value = newValue
})
</script>

<style scoped>
.icon-selector {
  width: 100%;
}

.icon-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-preview {
  color: var(--el-color-primary);
}

.icon-label {
  flex: 1;
}

:deep(.el-select-group__title) {
  font-weight: 600;
  color: var(--el-color-primary);
  padding: 8px 12px;
  background-color: var(--el-color-primary-light-9);
}

:deep(.el-select-group__wrap) {
  padding-bottom: 8px;
}

:deep(.el-select-group__wrap:not(:last-of-type)) {
  border-bottom: 1px solid var(--el-border-color-lighter);
  margin-bottom: 8px;
}
</style>
